<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/teachingMgt' }">教学管理</el-breadcrumb-item>
                <el-breadcrumb-item @click.native="backFn">教学详情</el-breadcrumb-item>
                <el-breadcrumb-item>学生信息详情</el-breadcrumb-item>
            </el-breadcrumb>
            <bread-crumb-back></bread-crumb-back>
        </div>
        <div class="content-box">
            <div class="content-title">
                <img src="./../../assets/images/title_icon11.png" />基本信息
            </div>
            <div class="teacher-mgt-info">
                <ul>
                    <li>姓名：{{ studentInfo.userName }}</li>
                    <li>性别: {{ studentInfo.userSex }}</li>
                    <li>学号: {{ studentInfo.userNumber }}</li>
                    <li>班级: {{ studentInfo.className }}</li>
                    <li>电话: {{ studentInfo.telephone }}</li>
                </ul>
            </div>
            <div class="content-title">
                <img src="./../../assets/images/title_icon14.png" />案例笔记
            </div>
            <div class="teacher-mgt-info-progress">
                <div class="progress-item" v-for="(item, index) in stepList">
                    <div class="progress-title">
                        {{ item.name }}
                    </div>
                    <!-- <vue-editor disabled v-model="item.instructions"></vue-editor> -->
                    <div class="environment-editor w-e-text" style="border:none; max-height:800px;" v-html="item.instructions"></div>
                    <!-- <p v-html="item.instructions"></p> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { VueEditor } from 'vue2-editor'
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            VueEditor,
            BreadCrumbBack
        },
        data () {
            return {
                classId: '',
                userId: '',
                studentInfo: '',
                stepList: ''
            }
        },
        created () {
            this.classId = this.$route.query.classId
            this.userId = this.$route.query.userId
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/item/teach/studentItemDetail?userId='+self.userId+'&classRelationId='+self.classId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.studentInfo = res.data.studentInfo
                        self.stepList = res.data.stepList
                        this.$nextTick(function () {
                            $('.ql-toolbar').hide()
                            $('.ql-editor').css('min-height','auto')
                            $('.ql-container').css('border','none')
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage
            },
            //跳笔记详情
            goDetail(id){
                this.$router.push({
                    path: '/teacher/teacheringMgtNotesDetail',
                    query: {
                        userId: this.userId,
                        chapterId: id
                    }
                })
            },
            backFn(){
                this.$router.go(-1)
            }
        }
    }
</script>
